<template>
	<el-main class="nopadding infinite-list" v-infinite-scroll="load" style="overflow:auto;height: 100%">
		<el-empty description="暂无记录" :image-size="100" v-if="recordList.length==0"></el-empty>
		<el-card v-for="item in recordList" class="infinite-list-item" :key="item.recordId"
				 style="cursor: pointer;position: relative;" @click="showRecordList(item)">
			<template v-slot:header>
				<div style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;" :title="item.title">
					{{ item.year }}年【{{ item.month }}月份】{{ item.userName }}的个人工资
				</div>
			</template>
			<sc-water-mark ref="wm" :text="waterMarkContent" :subtext="waterMarkSubtext" :showWater="waterMark=='1'">
				<div style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
					应发合计:{{ item.sumAmount }}/元
				</div>
				<div style="margin-top:10px;">
					<div style="display: inline-block">
						实扣费用:{{ item.careFunds }}/元
					</div>
					<div style="display: inline-block;float: right;">
						实发工资:{{ item.realSalary }}/元
					</div>
				</div>
			</sc-water-mark>
		</el-card>
	</el-main>
	<recordDetails v-if="dialog.detailsSave" ref="detailsDialog" @closed="dialog.detailsSave=false"></recordDetails>
</template>

<script>
import recordDetails from '@/views/hr/salary/create/details'

export default {
	components: {
		recordDetails,
	},
	data() {
		return {
			dialog: {
				detailsSave: false,
			},
			loadFlag: true,
			loadStatus: true,
			recordList: [],
			search: {
				page: 0,
			},
			waterMarkContent: '',
			waterMarkSubtext: '',
			waterMark: '0',
		}
	},
	computed: {},
	mounted() {
		this.waterMark = this.$TOOL.data.get("WATER_MARK");
		this.waterMarkContent = this.$TOOL.data.get("WATER_MARK_CONTENT");
		this.waterMarkSubtext = this.$TOOL.data.get("WATER_MARK_SUBTEXT");
	},
	methods: {
		load() {
			if (this.loadFlag && this.loadStatus) {
				this.loadStatus = false;
				this.getMyHrSalaryRecordListForApp();
			}
		},
		async getMyHrSalaryRecordListForApp() {
			let res = await this.$API.hr.hrSalary.getMyHrSalaryRecordListForApp.get(this.search);
			if (res.code == 200) {
				this.recordList = this.recordList.concat(res.data);
				this.search.page = this.search.page + 10;
				this.loadStatus = true;
				if (res.data.length < 10) {
					this.loadFlag = false
				}
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		showRecordList(item) {
			this.dialog.detailsSave = true
			this.$nextTick(() => {
				this.$refs.detailsDialog.open().setData(item)
			})
		}
	}
}
</script>
